<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Jdwolff.com - Creative Technologist - Developer - Thinker - Digital Problem Solver</title>
  <meta name="description" content="Joseph Wolff gained his powers in a tragic baking accident. He is a creative technologist running on HTML, CSS, jQuery, gummy cola candy, and a lot of love. ">
  <meta name="author" content="Joseph Wolff">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  
  <!--Load CSS for Flexslider plugin -->
  <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
  
  <!--Load CSS for jqueery.tweet plugin -->
  <link rel="stylesheet" href="css/jquery.tweet.css" type="text/css" media="screen" />
  
  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>
    <header>
		<nav id="scrollNav">
			<ul class="clearfix wrap" style="display:none;">
				<li><a href="#top" onClick="_gaq.push(['_trackEvent', 'NavScroll - toTop', 'Clicked', 'Manifesto']);">To Top</a></li>
				<li id="scManifesto" ><a href="#manifesto" onClick="_gaq.push(['_trackEvent', 'NavScroll - Manifesto', 'Clicked', 'Manifesto']);">Manifesto</a></li>
      			<li id="scEvidence"><a href="#evidence" onClick="_gaq.push(['_trackEvent', 'NavScroll - Evidence', 'Clicked', 'Evidence']);">Evidence</a></li>
				<li id="scRap" ><a href="#rapSheet" onClick="_gaq.push(['_trackEvent', 'NavScroll - Rap Sheet', 'Clicked', 'RapSheet']);">Rap Sheet</a></li>
      			<li id="sContact"><a href="#contact" onClick="_gaq.push(['_trackEvent', 'NavScroll - Connect', 'Clicked', 'Connect']);">Connect</a></li>

			</ul>
		</nav>
    	<div class="header" id="top">
    	<div id="logo" class="wrap">
    	<h1 class="ir wrap"><a href="#">jdwolff.com</a></h1>
    	</div>
		<nav class="nav">
		<div class="wrap">
		<h1 class="visuallyhidden">Main Menu</h1>
			<ul class="clearfix">
				<li class="manifesto"><a href="#manifesto" onClick="_gaq.push(['_trackEvent', 'Nav - Manifesto', 'Clicked', 'Manifesto']);">Manifesto<em>Strong words about<br/>strong beliefs.</em></a></li>
      			<li class="evidence"><a href="#evidence" onClick="_gaq.push(['_trackEvent', 'Nav - Evidence', 'Clicked', 'Evidence']);">Evidence<em>Projects I’ve managed,<br/> messes I’ve cleaned.</em></a></li>
      			<li class="connect"><a href="#contact" onClick="_gaq.push(['_trackEvent', 'Nav - Connect', 'Clicked', 'Connect']);">Connect<em>Need me? Here's<br/> how to find me.</em></a></li>
     			<li class="rapSheet"><a href="#rapSheet" onClick="_gaq.push(['_trackEvent', 'Nav - Rap Sheet', 'Clicked', 'RapSheet']);">Rap Sheet<em>Marketing dirty work,<br/> a brief history.</em></a></li>
			</ul>
			</div>
		</nav>
		<div class="content">
		<div class="wrap" id="subhead">
		<h2>Creative Technologist - Developer - Thinker - Digital Problem Solver</h2>
		</div>
		</div>
    </header>
	<section id="manifesto" class="manifesto">
		<div class="wrap clearfix">
		<div class="graphic">
			<img src="img/venn.png" alt="Intersection of Disciplines. Where art/photography, project mangament, coding, and poetry meet."/>
		</div>
		<div class="copy">
			<h1 class="ft">Manifesto</h1>
			<hgroup>
			<h2 class="ft">Specialization is for Insects</h2>
			<h3 class="ft">&ndash; Robert Heinlein</h3>
			</hgroup>
			<p>Creative technologists know that the only constant in the interactive world is that it’s constantly changing, 
				always evolving and they respond by doing the same. We speak a language infused with the precision of code 
				and the beauty of effective design. We are here to deliver you from stagnation.</p>
				<p>We keep the interactive world moving by encouraging cross-collaboration. Creative technologists aren’t confined 
				to silos and have no problem communicating intelligently and effectively with specialists and other team members.
				As translators we turn code into common sense and client objectives into technical requirements.</p>
				<p>A creative technologist devours knowledge and is constantly seeking out new areas to explore. This compulsion for 
				learning has made us flexible and adaptable to changes in the industry like HTML5 and responsive design. 
				Every hack/technique/trick in our bag helps us see more of the big-picture.</p>
				<a href="#" class="collapsePara" onClick="_gaq.push(['_trackEvent', 'Manifesto - More', 'Clicked', 'More']);" style="display:block;">Collapse Paragraph </a>
				<div class="expand" style="display:none;">
				<p>We thrive at driving projects. Creative technologists aren’t afraid to own projects which may call for varied skillsets. 
				We understand the interplay between different disciplines and know how to assemble and manage team members with 
				complementary abilities.</p>
				<p>Creative technologists were here before the specialists had names to describe their jobs. While specialists may devote 
				their lives to learning dead languages and standards we’ll be busy solving problems using our entire skillset. 
				We are the same hybrid of technology geek and evangelist that moved the internet out of the back room and into 
				your living room. And we will always be there to move you into the next big thing.</p>
				</div>
			</div>
			</div>
		</section>
		<section id="evidence" class="evidence">
			<h1 class="hidden">Evidence</h1>
			<div class="flex-container">
			<div class="wrap">
			<div class="flexslider">
		    <ul class="slides">		    
				<li class="clearfix">
		    		<img src="img/work-maloy-thumb.png" alt="Maloy Risk Services Website"/>
		    		<div class="flex-caption">
		    			<hgroup>
		    				<h2>Maloy Risk Services</h2>
		    				<h3>CMS-driven corporate site for insurance reseller.</h3>
		    			</hgroup>
		    			<ul>
							<li>Developer & Project Manager</li>
							<li>HTML5 &amp; CSS3</li>
							<li>JS &amp; jQuery</li>
							<li>Wordpress</li>
						</ul>
		    		</div>
		    	</li>
				<li class="clearfix">
		    		<img src="img/id_work_thumb.png" alt="Ideal Living Website"/>
		    		<div class="flex-caption">
		    			<hgroup>
		    				<h2>Ideal Living</h2>
		    				<h3>Corporate homepage for consumer product marketer mavens.</h3>
		    			</hgroup>
		    			<ul>
							<li>Developer</li>
							<li>JS &amp; jQuery</li>
							<li>PHP</li>
						</ul>
		    		</div>
		    	</li>
				<li class="clearfix">
		    		<img src="img/work-red-xrite-blast.png" alt="Xrite Red Campaign Eblast"/>
		    		<div class="flex-caption">
		    			<hgroup>
		    				<h2>X-Rite</h2>
		    				<h3>Promotional eblast &amp; landing page for color management wizards.</h3>
		    			</hgroup>
		    			<ul>
							<li>Developer & Project Manager</li>
							<li>HTML &amp; CSS</li>
							<li>JS &amp; jQuery</li>
							<li>PHP</li>
							<li>Yii Framework</li>
						</ul>
		    		</div>
		    	</li>
				<li class="clearfix">
		    		<img src="img/work-red-xrite-lp.png" alt="Xrite Red Campaign LP"/>
		    		<div class="flex-caption">
		    			<hgroup>
		    				<h2>X-Rite</h2>
		    				<h3>Promotional eblast &amp; landing page for color management wizards.</h3>
		    			</hgroup>
		    			<ul>
							<li>Developer & Project Manager</li>
							<li>HTML &amp; CSS</li>
							<li>JS &amp; jQuery</li>
							<li>PHP</li>
							<li>Yii Framework</li>
						</ul>
		    		</div>
		    	</li>
		    </ul>
		  </div>
	 	</div>
	 	</div>
		</section>
		<section id="rapSheet" class="rapSheet">
			<div class="wrap clearfix">
				<div class="copy">
					<hgroup>
						<h1 class="ft">Rap Sheet</h1>
						<h2 class="ft">I’m Joseph Wolff &mdash; I solve problems.</h2>
					</hgroup>
					<p>I've raised projects from embryonic ideas to fully implemented campaigns to their eventual resting place as ROI data. 
					It’s not common knowledge, but projects have parents, just like all of us. 
					Most creative and development teams are maternal &mdash; they nurture, fuss, and fret. 
					However, I take after my father &mdash; sure I care, but I’ll ground feature creep and out-of-scope design changes faster than you can say &ldquo;missed deadline.&rdquo;</p>
					<p>If I'm curt it's because time is a factor. I think fast, I talk fast and I act fast. I'm not here to say please, 
					I'm here to teach agency and client stakeholders what to do, and if self-preservation is an instinct they possess 
					they’d better do it and do it quick. Sure, I can have a good time. I once broke every rule on a slip-n-slide just for fun.</p>
					<p>But when it comes to my projects I don’t tolerate the following: wasting time, under-delivering, and poor communication between agency and client stakeholders. Do you know what those have in common? 
					They’re all fancy ways of saying &ldquo;losing money.&rdquo; </p>
					<p>Agencies and good interactive shops can’t afford to work in silos, and neither can I. 
					To understand how it all fits together I’ve worked in many aspects of the business: 
					development, design, traffic, media, and account service. 
					I’ve worked on traditional, digital, integrated projects, and campaigns. 
					I’ve spent time with b2b and b2c clients in the financial, technology, life-sciences, and non-profit industries. 
					Along the way I've tracked milestones, coded front and back end, optimized Adwords campaigns, bought media, 
					and survived two weeks on nothing but Kuerig coffee pods and Haribo gummy colas.</p>
					<p>I read constantly. RSS feeds, library books, soda bottle wrappers &mdash; I don’t discriminate. 
					I also bake pies and was voted best-dressed in a flour-covered apron by my wife two years running, 
					though she swears the voting was rigged.</p>
				</div>
				<div class="graphic">
					<img src="img/thewolff.png" alt="That would be a photo of me, in all of my Photoshopped glory."/>
				</div>
			</div>
			<aside class="surivalKit">
				<div class="surivalKit">
				<div class="wrap clearfix" >
				<h1>Survival Kit</h1>
				<ul id="kitContainer" class="clearfix">
					<li class="clearfix listing">Dev<ul>
						<li>HTML / CSS</li>
						<li>Javascript &amp; jQuery</li>
						<li>PHP</li>
						<li>MySQL</li>
						<li>Wordpress</li>
						<li>Solid text editors</li>
					</ul></li>
					<li class="clearfix listing">Design<ul>
						<li>Fireworks</li>
						<li>Photoshop</li>
						<li>InDesign</li>
						<li>Illustrator</li>
						<li>Grids</li>
					</ul></li>
					<li class="clearfix listing">UI and UX<ul>
						<li>Visio</li>
						<li>OmniGraffle</li>
						<li>Axure RP</li>
						<li>Plain Old Graph Paper</li>
					</ul></li>
					<li class="clearfix listing">Project Mgmt<ul>
						<li>Agile Project Management</li>
						<li>Jira</li>
						<li>Function Fox</li>
						<li>Home-brewed Excel docs</li>
					</ul></li>
				</ul>
				</div>
				</div>
			</aside>
		</section>
		<section id="contact" class="contact">
			<div class="contact">
			<div class="wrap clearfix">
				<div class="left clearfix">
					<h1 class="ft">Connect</h1>
					<h2 class="ft">fun with contact forms</h2>
					<form method="post" id="contactForm" action="contact.php">
						<label class="visuallyhidden">Name</label>
						<input type="text" class="text_input clear" placeholder="NAME" maxlength="256" name="name" id="name"/>
						<label class="visuallyhidden">Email</label>
						<input type="text" class="text_input clear" placeholder="EMAIL" maxlength="256" name="email" id="email"/>
						<label class="visuallyhidden">Message</label>
						<textarea placeholder="MESSAGE" class="text_input clear" name="message" id="message"></textarea>
						<div class="clearfix">
							<input id="submit"onClick="_gaq.push(['_trackEvent', 'Contact Form - Submitted', 'Clicked', 'Manifesto']);" class="ir submit" type="submit" value="submit" />
						</div>
					</form>					
				</div>
				<div class="right clearfix">
					<ul class="clearfix social">
						<li id="linkedIn"><a href="http://www.linkedin.com/in/josephdwolff" onClick="_gaq.push(['_trackEvent', 'Social - LinkedIn', 'Clicked', 'LinkedIn']);" target="_blank"></a></li>
						<li id="gPlus"><a href="https://plus.google.com/113031579898863590862" onClick="_gaq.push(['_trackEvent', 'Social - gPlus', 'Clicked', 'GoogPlus']);" target="_blank"></a></li>
						<li id="gMail"><a href="mailto:thewolff@jdwolff.com" onClick="_gaq.push(['_trackEvent', 'Social - Email', 'Clicked', 'Email']);" target="_blank"></a></li>
						<li id="twit"><a href="http://twitter.com/#!/jdwolff" onClick="_gaq.push(['_trackEvent', 'Social - Twit', 'Clicked', 'Twit']);" target="_blank"></a></li>
					</ul>
					<div class="tweet clearfix">
					<h2 class="ft">Tweet Feed</h2>
					</div>
				</div>
			</div>
			<footer id="footer">
				<div class="wrap">
					<p>Copyright &copy; 2011 Joseph Wolff</p>
					<div class="graphic clearfix">
						<img src="img/wolf-duo.png"/>
					</div>
				</div>
			</footer>
			</div>

		</section>
		</div> <!--! end of .content -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>
  <!-- Except FitText, which needs to load sooner rather than later-->
  <script src="js/jquery.fittext.js"></script>
  

  <script type="text/javascript">
$(document).ready(function(){
	$('.collapsePara').collapser({
		target: 'div.expand',
		effect: 'slide',
		changeText: 1,
		expandHtml: 'More &raquo;',
		collapseHtml: '&laquo; Less ',
		expandClass: 'expand',
		collapseClass:'collapse'
	});
});
</script>


  <!-- end scripts-->

	
  <!-- What fun would it be if the man couldn't watch you? -->
  <script>
    window._gaq = [['_setAccount','UA-25971141-1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>


  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->
  
</body>
</html>
